<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/include/taglibs.jsp" %>
<html>
<head>
    <%@include file="/include/header.html" %>
    <link rel="stylesheet" href="${ctx}/libjs/plugins/treeBox/treeBox.css">
    <script type="text/javascript" src="${ctx}/libjs/plugins/treeBox/treeBox.js"></script>
    <%--<script type="text/javascript" src="${ctx}/libjs/data.js"></script>--%>
    <script type="text/javascript" src="${ctx}/appjs/elec/operatorElecStation.js"></script>
    <style>
        .treeBox .tree-active:hover {
            /*background:#a84747;*/
            color: #fff !important;
        }

        .treeBox a {
            color: #000;
            text-align: center !important;
        }

        .tree-active {
            background: #1e9fff;
            color: #fff !important;
        }

        .treeBox .tree-active:hover {
            background: #1e9fff;
            color: #fff !important;
        }

        .treeBox label {
            text-align: center;
        }

        .tree-confirm {
            color: #fff !important;
            background: #1e9fff !important;
            border: none;
        }
    </style>
</head>

<script type="text/javascript">
    $('#topLink', window.parent.document).html(function (i, origText) {
        return'<ol class="breadcrumb">' +
            '<li class="breadcrumb-item">' +
            '<a href="">主页</a>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<a>设备管理</a>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<strong>桩群信息</strong>' +
            '</li>' +
            '</ol>';
    });

    var has_add = '';
    var has_edit = '';
    var has_delete = '';
</script>

<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="col-sm-12">
        <div class="ibox">
            <div class="ibox-body">
                <div class="row">
                    <%--<div class="pull-left search col-md-2">--%>
                        <%--<button type="button" class="btn btn-primary" onclick="station.addStation()">--%>
                            <%--增加桩群--%>
                        <%--</button>--%>
                    <%--</div>--%>
                    <div class="pull-left search col-md-2">
                        <div id="treeBox" style="text-align:center;"><!--id必须是treeBox  -->
                            <input class="focusEl form-control" type="text" readonly placeholder="请选择省市区">
                            <input class="areaId" type="hidden" name="areaId" id="areaId" value="">

                            <select type="text" class="form-control" name="bizType" id="bizType">
                                <option value="">营业类型</option>
                                <option value="0">自营</option>
                                <option value="1">非自营</option>
                            </select>
                        </div>
                    </div>
                    <div class="pull-left search col-md-2">
                        <input id="stationName" name="stationName" type="text" class="form-control"
                               placeholder="桩群名">
                        <input id="stationNo" name="stationNo" type="text" class="form-control"
                               placeholder="桩群编号">
                    </div>

                    <div class="pull-left search col-md-2">
                        <select type="text" class="form-control" name="operateStatus" id="operateStatus">
                            <option value="">运营状态</option>
                            <option value="0">未上线</option>
                            <option value="1">上线</option>
                            <option value="2">下线</option>
                        </select>
                    </div>
                    <div class="pull-left search col-md-1">
                        <button class="btn btn-success" onclick="station.reLoad()">查询</button>
                    </div>
                    <%--<div class="pull-left search col-md-1">--%>
                        <%--<input id="count" name="count" type="text" class="form-control"--%>
                               <%--placeholder="导出条数">--%>
                    <%--</div>--%>
                    <%--<div class="pull-left search col-md-2">--%>
                        <%--<button class="btn btn-success" onclick="station.exportStation()">导出</button>--%>
                    <%--</div>--%>
                </div>
            </div>

            <table id="exampleTable" data-mobile-responsive="true">
            </table>
        </div>
    </div>
</div>
</div>

<script type="text/javascript">
    station.init();
</script>
<script>
    function selectByArea() {
        $.ajax({
            "type": "POST",
            "url": "${ctx}/elecStation/selectByArea",
            "data": {},
            "success": function (data) {
                console.log(data)
                treeBox({
                    el: '$(".focusEl")', //焦点或者点击事件DOM 必传可以是非input元素
                    // width:{ // 各级列表宽度 可选 不传默认值就为 160，160，160，200
                    //     lv1:160,
                    //     lv2:160,
                    //     lv3:160,
                    //     selected:200
                    // },
                    // selectedNum:3,// 设置可以选择多少个复选框 可选 不传默认3
                    // height:280, //高度 不传默认值 280
                    data: data, //数据 必传
                    topData: data,// 常用数据 可选
                    confirm: function (res) { //回调函数 必传 会以json的格式返回所选中的数据
                        for (var k in res) {
                            $(".areaId").eq(k).val(res[k].value);
                        }

                    }
                });
            }
        })
    }

    selectByArea()


</script>
</body>
</html>